<template>
  <div class="appDetailPage">
    <a-card>
      <a-row style="margin-bottom: 16px" class="grid-demo">
        <a-col flex="auto" class="content-wrapper">
          <h2>{{ appData.appName }}</h2>
          <p>应用描述：{{ appData.appDesc }}</p>
          <p>应用类型：{{ APP_TYPE_MAP[appData.appType] }}</p>
          <p>
            评分策略：{{ APP_SCORING_STRATEGY_MAP[appData.scoringStrategy] }}
          </p>
          <p style="height: 40px; align-content: center">
            作者：
            <a-avatar :size="32">
              <img alt="avatar" :src="appData.user?.userAvatar" />
            </a-avatar>
            {{ appData.user?.userName ?? "无名" }}
          </p>
          <p>
            创建时间：
            {{ dayjs(appData.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </p>
          <a-space>
            <a-button type="primary" :href="`/answer/do/${id}`"
              >开始答题
            </a-button>
            <a-button @click="doShare">分享应用</a-button>
            <a-button type="dashed" :href="`/add/question/${id}`" v-if="isMy"
              >设置题目
            </a-button>
            <a-button
              type="dashed"
              :href="`/add/scoring_result/${id}`"
              v-if="isMy"
              >设置评分
            </a-button>
            <a-button type="dashed" :href="`/add/app/${id}`" v-if="isMy"
              >修改应用
            </a-button>
          </a-space>
        </a-col>
        <a-col flex="300px">
          <a-image width="200" :src="appData.appIcon" />
        </a-col>
      </a-row>
    </a-card>
    <ShareModal :link="shareLink" title="应用分享" ref="shareModalRef" />
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { withDefaults, defineProps, ref, computed, onMounted } from "vue";
import message from "@arco-design/web-vue/es/message";
import { getAppVoByIdUsingGet } from "@/api/appController";
import API from "@/api";
import { APP_SCORING_STRATEGY_MAP, APP_TYPE_MAP } from "@/constant/app";
import dayjs from "dayjs";
import { useLoginUserStore } from "@/store/userStore";
import ShareModal from "@/components/ShareModal.vue";

interface Props {
  id: any;
}

const router = useRouter();
const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return 0;
  },
});
/**
 * 加载数据
 */
const appData = ref<API.AppVO>({});
const loadData = async () => {
  const res = await getAppVoByIdUsingGet({ id: props.id });
  if (res.data.code === 0) {
    appData.value = res.data.data || {};
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};
loadData();
const loginUser = useLoginUserStore();
const isMy = computed(() => {
  return loginUser && loginUser.loginUser.id === appData.value.userId;
});

// 分享

// 分享链接
const shareLink = `${window.location.protocol}//${window.location.host}/app/detail/${props.id}`;
// 分享弹窗的引用
const shareModalRef = ref(null);
const doShare = (e: Event) => {
  console.log(shareModalRef?.value);
  if (shareModalRef.value) {
    // console.log(shareModalRef.value);
    shareModalRef?.value?.openModal();
  }
  // 阻止冒泡，防止跳转到详情页
  e.stopPropagation();
};
// 确保组件已经挂载
onMounted(() => {
  console.log(shareModalRef.value); // 确保不为 null
});
</script>
<style scoped>
#appDetailPage {
}

#appDetailPage .content-wrapper > * {
  margin-bottom: 24px;
}
</style>
